<template>
  <div style="padding-left:25px;height: 1080px;width: 80%">
    <!-- table-week start   -->
    <el-table class="table-week" style="width:100%" :data="smartDatas" border fit :empty-text="empty">
      <el-table-column align="center" width="100" fixed class-name="col-date3 colNoneBorder" >
        <template slot="header"> 菜品/食物 </template>
        <template slot-scope="scope">
          <div v-bind:data="scope.row.name" class="foodType">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <!-- 周一   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week1')"
        align="center"
        width="280"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week1").lable }}({{
            headers.find((p) => p.name == "week1").date
            }})
          </div>
          <div class="">
            <!--<el-checkbox-->
            <!--label="设置为假期"-->
            <!--:checked="headers.find((p) => p.name == 'week1').is_vacation"-->
            <!--@change="onCheck('week1', $event)"-->
            <!--&gt;</el-checkbox>-->
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week1')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              @expand-change="expandchange"
              :data="scope.row.weeks.find((p) => p.name == 'week1').foods"
              row-key="id"
              :empty-text="empty"
              :show-header="false"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="食品/食材"
                prop="name"
                header-align="center"
                align="left"
                width="120"
              ></el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="foodChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week1').id
                          )"
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="dishChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week1').id)"
                      placeholder="请输入内容"
                    ></el-input>
                    <span class="arrow-up"  v-if="scope1.row.up"><img src="/img/arrowup.png" width="20px" height="20px"/>
                      <span>{{scope1.row.up}}%</span>
                    </span>
                    <span class="arrow-down" v-if="scope1.row.down"><img src="/img/arrowdown.png" width="20px" height="20px"/>
                      <span>{{scope1.row.down}}%</span>
                    </span>
                    <!--<div style="width: 35px; text-algin: center">-->
                    <!--&lt;!&ndash;<el-link&ndash;&gt;-->
                    <!--&lt;!&ndash;v-if="scope1.row.children"&ndash;&gt;-->
                    <!--&lt;!&ndash;type="primary"&ndash;&gt;-->
                    <!--&lt;!&ndash;@click="&ndash;&gt;-->
                    <!--&lt;!&ndash;onRemove(&ndash;&gt;-->
                    <!--&lt;!&ndash;scope.row.id,&ndash;&gt;-->
                    <!--&lt;!&ndash;scope.row.weeks.find((p) => p.name == 'week1').id,&ndash;&gt;-->
                    <!--&lt;!&ndash;scope1.row.id&ndash;&gt;-->
                    <!--&lt;!&ndash;)&ndash;&gt;-->
                    <!--&lt;!&ndash;"&ndash;&gt;-->
                    <!--&lt;!&ndash;&gt;移除</el-link&ndash;&gt;-->
                    <!--&lt;!&ndash;&gt;&ndash;&gt;-->
                    <!--</div>-->
                  </div>
                </template>
              </el-table-column>
              <!--<el-table-column label="图片" align="center">-->
              <!--<template slot-scope="scope1">-->
              <!--<div-->
              <!--v-if="-->
              <!--scope1.$index === 0 &&-->
              <!--scope.row.weeks.find((p) => p.name == 'week1')-->
              <!--"-->
              <!--style="width: 100px; height: 100px; margin: 0 auto"-->
              <!--&gt;-->
              <!--<el-upload-->
              <!--:multiple="false"-->
              <!--:show-file-list="false"-->
              <!--:action="upload_url"-->
              <!--:on-change="-->
              <!--onUploadImage(-->
              <!--scope.row.id,-->
              <!--scope.row.weeks.find((p) => p.name == 'week1').id,-->
              <!--$event-->
              <!--)-->
              <!--"-->
              <!--&gt;-->
              <!--<img-->
              <!--v-if="-->
              <!--scope.row.weeks.find((p) => p.name == 'week1').image-->
              <!--"-->
              <!--:src="-->
              <!--scope.row.weeks.find((p) => p.name == 'week1').image-->
              <!--"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--<img-->
              <!--v-if="-->
              <!--!scope.row.weeks.find((p) => p.name == 'week1').image-->
              <!--"-->
              <!--:src="empty_image"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--</el-upload>-->
              <!--</div>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week1').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周二   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week2')"
        align="center"
        width="280"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week2").lable }}({{
            headers.find((p) => p.name == "week2").date
            }})
          </div>
          <!--<div class="">-->
          <!--<el-checkbox-->
          <!--label="设置为假期"-->
          <!--:checked="headers.find((p) => p.name == 'week2').is_vacation"-->
          <!--@change="onCheck('week2', $event)"-->
          <!--&gt;</el-checkbox>-->
          <!--</div>-->
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week2')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 120%"
              :data="scope.row.weeks.find((p) => p.name == 'week2').foods"
              row-key="id"
              :empty-text="empty"
              :show-header="false"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="食品/食材"
                prop="name"
                header-align="center"
                align="left"
                width="120"
              ></el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容" @change="foodChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week2').id
                          )"

                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="dishChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week2').id
                          )"
                    ></el-input>
                    <span class="arrow-up"  v-if="scope1.row.up"><img src="/img/arrowup.png" width="20px" height="20px"/>
                      <span>{{scope1.row.up}}%</span>
                    </span>
                    <span class="arrow-down" v-if="scope1.row.down"><img src="/img/arrowdown.png" width="20px" height="20px"/>
                      <span>{{scope1.row.down}}%</span>
                    </span>
                    <!--<span><img src="/img/arrowup.png" width="20px" height="20px"/>-->
                    <!--12%</span>-->
                    <!--<div style="width: 35px; text-algin: center">-->
                    <!--<el-link-->
                    <!--v-if="scope1.row.children"-->
                    <!--type="primary"-->
                    <!--@click="-->
                    <!--onRemove(-->
                    <!--scope.row.id,-->
                    <!--scope.row.weeks.find((p) => p.name == 'week2').id,-->
                    <!--scope1.row.id-->
                    <!--)-->
                    <!--"-->
                    <!--&gt;移除</el-link-->
                    <!--&gt;-->
                    <!--</div>-->
                  </div>
                </template>
              </el-table-column>
              <!--<el-table-column label="图片" align="center">-->
              <!--<template slot-scope="scope1">-->
              <!--<div-->
              <!--v-if="-->
              <!--scope1.$index === 0 &&-->
              <!--scope.row.weeks.find((p) => p.name == 'week2')-->
              <!--"-->
              <!--style="width: 100px; height: 100px; margin: 0 auto"-->
              <!--&gt;-->
              <!--<img-->
              <!--v-if="-->
              <!--scope.row.weeks.find((p) => p.name == 'week2').image-->
              <!--"-->
              <!--:src="-->
              <!--scope.row.weeks.find((p) => p.name == 'week2').image-->
              <!--"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--<img-->
              <!--v-if="-->
              <!--!scope.row.weeks.find((p) => p.name == 'week2').image-->
              <!--"-->
              <!--:src="empty_image"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--</div>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week2').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周三   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week3')"
        align="center"
        width="280"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week3").lable }}({{
            headers.find((p) => p.name == "week3").date
            }})
          </div>
          <!--<div class="">-->
          <!--<el-checkbox-->
          <!--label="设置为假期"-->
          <!--:checked="headers.find((p) => p.name == 'week3').is_vacation"-->
          <!--@change="onCheck('week3', $event)"-->
          <!--&gt;</el-checkbox>-->
          <!--</div>-->
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week3')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week3').foods"
              row-key="id"
              :empty-text="empty"
              :show-header="false"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="食品/食材"
                prop="name"
                header-align="center"
                align="left"
                width="120"
              ></el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="foodChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week3').id
                          )"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="dishChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week3').id
                          )"
                    ></el-input>
                    <span class="arrow-up"  v-if="scope1.row.up"><img src="/img/arrowup.png" width="20px" height="20px"/>
                      <span>{{scope1.row.up}}%</span>
                    </span>
                    <span class="arrow-down" v-if="scope1.row.down"><img src="/img/arrowdown.png" width="20px" height="20px"/>
                      <span>{{scope1.row.down}}%</span>
                    </span>
                    <!--<div style="width: 35px; text-algin: center">-->
                    <!--<el-link-->
                    <!--v-if="scope1.row.children"-->
                    <!--type="primary"-->
                    <!--@click="-->
                    <!--onRemove(-->
                    <!--scope.row.id,-->
                    <!--scope.row.weeks.find((p) => p.name == 'week3').id,-->
                    <!--scope1.row.id-->
                    <!--)-->
                    <!--"-->
                    <!--&gt;移除</el-link-->
                    <!--&gt;-->
                    <!--</div>-->
                  </div>
                </template>
              </el-table-column>
              <!--<el-table-column label="图片" align="center">-->
              <!--<template slot-scope="scope1">-->
              <!--<div-->
              <!--v-if="-->
              <!--scope1.$index === 0 &&-->
              <!--scope.row.weeks.find((p) => p.name == 'week3')-->
              <!--"-->
              <!--style="width: 100px; height: 100px; margin: 0 auto"-->
              <!--&gt;-->
              <!--<img-->
              <!--v-if="-->
              <!--scope.row.weeks.find((p) => p.name == 'week3').image-->
              <!--"-->
              <!--:src="-->
              <!--scope.row.weeks.find((p) => p.name == 'week3').image-->
              <!--"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--<img-->
              <!--v-if="-->
              <!--!scope.row.weeks.find((p) => p.name == 'week3').image-->
              <!--"-->
              <!--:src="empty_image"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--</div>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week3').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周四   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week4')"
        align="center"
        width="280"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week4").lable }}({{
            headers.find((p) => p.name == "week4").date
            }})
          </div>
          <!--<div class="">-->
          <!--<el-checkbox-->
          <!--label="设置为假期"-->
          <!--:checked="headers.find((p) => p.name == 'week4').is_vacation"-->
          <!--@change="onCheck('week4', $event)"-->
          <!--&gt;</el-checkbox>-->
          <!--</div>-->
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week4')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week4').foods"
              row-key="id"
              :empty-text="empty"
              :show-header="false"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="食品/食材"
                prop="name"
                header-align="center"
                align="left"
                width="120"
              ></el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="foodChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week4').id
                          )"
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="dishChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week4').id
                          )"
                      placeholder="请输入内容"
                    ></el-input>
                    <span class="arrow-up"  v-if="scope1.row.up"><img src="/img/arrowup.png" width="20px" height="20px"/>
                      <span>{{scope1.row.up}}%</span>
                    </span>
                    <span class="arrow-down" v-if="scope1.row.down"><img src="/img/arrowdown.png" width="20px" height="20px"/>
                      <span>{{scope1.row.down}}%</span>
                    </span>
                    <!--<div style="width: 35px; text-algin: center">-->
                    <!--<el-link-->
                    <!--v-if="scope1.row.children"-->
                    <!--type="primary"-->
                    <!--@click="-->
                    <!--onRemove(-->
                    <!--scope.row.id,-->
                    <!--scope.row.weeks.find((p) => p.name == 'week4').id,-->
                    <!--scope1.row.id-->
                    <!--)-->
                    <!--"-->
                    <!--&gt;移除</el-link-->
                    <!--&gt;-->
                    <!--</div>-->
                  </div>
                </template>
              </el-table-column>
              <!--<el-table-column label="图片" align="center">-->
              <!--<template slot-scope="scope1">-->
              <!--<div-->
              <!--v-if="-->
              <!--scope1.$index === 0 &&-->
              <!--scope.row.weeks.find((p) => p.name == 'week4')-->
              <!--"-->
              <!--style="width: 100px; height: 100px; margin: 0 auto"-->
              <!--&gt;-->
              <!--<img-->
              <!--v-if="-->
              <!--scope.row.weeks.find((p) => p.name == 'week4').image-->
              <!--"-->
              <!--:src="-->
              <!--scope.row.weeks.find((p) => p.name == 'week4').image-->
              <!--"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--<img-->
              <!--v-if="-->
              <!--!scope.row.weeks.find((p) => p.name == 'week4').image-->
              <!--"-->
              <!--:src="empty_image"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--</div>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week4').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周五  -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week5')"
        align="center"
        width="280"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week5").lable }}({{
            headers.find((p) => p.name == "week5").date
            }})
          </div>
          <!--<div class="">-->
          <!--<el-checkbox-->
          <!--label="设置为假期"-->
          <!--:checked="headers.find((p) => p.name == 'week5').is_vacation"-->
          <!--@change="onCheck('week5', $event)"-->
          <!--&gt;</el-checkbox>-->
          <!--</div>-->
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week5')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week5').foods"
              row-key="id"
              :empty-text="empty"
              :show-header="false"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="食品/食材"
                prop="name"
                header-align="center"
                align="left"
                width="120"
              ></el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="foodChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week5').id
                          )"
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="dishChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week5').id
                          )"
                      placeholder="请输入内容"
                    ></el-input>
                    <span class="arrow-up"  v-if="scope1.row.up"><img src="/img/arrowup.png" width="20px" height="20px"/>
                      <span>{{scope1.row.up}}%</span>
                    </span>
                    <span class="arrow-down" v-if="scope1.row.down"><img src="/img/arrowdown.png" width="20px" height="20px"/>
                      <span>{{scope1.row.down}}%</span>
                    </span>
                    <!--<div style="width: 35px; text-algin: center">-->
                    <!--<el-link-->
                    <!--v-if="scope1.row.children"-->
                    <!--type="primary"-->
                    <!--@click="-->
                    <!--onRemove(-->
                    <!--scope.row.id,-->
                    <!--scope.row.weeks.find((p) => p.name == 'week5').id,-->
                    <!--scope1.row.id-->
                    <!--)-->
                    <!--"-->
                    <!--&gt;移除</el-link-->
                    <!--&gt;-->
                    <!--</div>-->
                  </div>
                </template>
              </el-table-column>
              <!--<el-table-column label="图片" align="center">-->
              <!--<template slot-scope="scope1">-->
              <!--<div-->
              <!--v-if="-->
              <!--scope1.$index === 0 &&-->
              <!--scope.row.weeks.find((p) => p.name == 'week5')-->
              <!--"-->
              <!--style="width: 100px; height: 100px; margin: 0 auto"-->
              <!--&gt;-->
              <!--<img-->
              <!--v-if="-->
              <!--scope.row.weeks.find((p) => p.name == 'week5').image-->
              <!--"-->
              <!--:src="-->
              <!--scope.row.weeks.find((p) => p.name == 'week5').image-->
              <!--"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--<img-->
              <!--v-if="-->
              <!--!scope.row.weeks.find((p) => p.name == 'week5').image-->
              <!--"-->
              <!--:src="empty_image"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--</div>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week5').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周六   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week6')"
        align="center"
        width="280"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week6").lable }}({{
            headers.find((p) => p.name == "week6").date
            }})
          </div>
          <!--<div class="">-->
          <!--<el-checkbox-->
          <!--label="设置为假期"-->
          <!--:checked="headers.find((p) => p.name == 'week6').is_vacation"-->
          <!--@change="onCheck('week6', $event)"-->
          <!--&gt;</el-checkbox>-->
          <!--</div>-->
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week6')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week6').foods"
              row-key="id"
              :empty-text="empty"
              :show-header="false"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="食品/食材"
                prop="name"
                header-align="center"
                align="left"
                width="120"
              ></el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="foodChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week6').id
                          )"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="dishChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week6').id
                          )"
                      placeholder="请输入内容"
                    ></el-input>
                    <span class="arrow-up"  v-if="scope1.row.up"><img src="/img/arrowup.png" width="20px" height="20px"/>
                      <span>{{scope1.row.up}}%</span>
                    </span>
                    <span class="arrow-down" v-if="scope1.row.down"><img src="/img/arrowdown.png" width="20px" height="20px"/>
                      <span>{{scope1.row.down}}%</span>
                    </span>
                    <!--<div style="width: 35px; text-algin: center">-->
                    <!--<el-link-->
                    <!--v-if="scope1.row.children"-->
                    <!--type="primary"-->
                    <!--@click="-->
                    <!--onRemove(-->
                    <!--scope.row.id,-->
                    <!--scope.row.weeks.find((p) => p.name == 'week6').id,-->
                    <!--scope1.row.id-->
                    <!--)-->
                    <!--"-->
                    <!--&gt;移除</el-link-->
                    <!--&gt;-->
                    <!--</div>-->
                  </div>
                </template>
              </el-table-column>
              <!--<el-table-column label="图片" align="center">-->
              <!--<template slot-scope="scope1">-->
              <!--<div-->
              <!--v-if="-->
              <!--scope1.$index === 0 &&-->
              <!--scope.row.weeks.find((p) => p.name == 'week6')-->
              <!--"-->
              <!--style="width: 100px; height: 100px; margin: 0 auto"-->
              <!--&gt;-->
              <!--<img-->
              <!--v-if="-->
              <!--scope.row.weeks.find((p) => p.name == 'week6').image-->
              <!--"-->
              <!--:src="-->
              <!--scope.row.weeks.find((p) => p.name == 'week6').image-->
              <!--"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--<img-->
              <!--v-if="-->
              <!--!scope.row.weeks.find((p) => p.name == 'week6').image-->
              <!--"-->
              <!--:src="empty_image"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--</div>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week6').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周天  -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week7')"
        align="center"
        width="280"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week7").lable }}({{
            headers.find((p) => p.name == "week7").date
            }})
          </div>
          <!--<div class="">-->
          <!--<el-checkbox-->
          <!--label="设置为假期"-->
          <!--:checked="headers.find((p) => p.name == 'week7').is_vacation"-->
          <!--@change="onCheck('week7', $event)"-->
          <!--&gt;</el-checkbox>-->
          <!--</div>-->
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week7')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week7').foods"
              row-key="id"
              :empty-text="empty"
              :show-header="false"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="食品/食材"
                prop="name"
                header-align="center"
                align="left"
                width="120"
              ></el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="foodChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week7').id
                          )"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="dishChange(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week7').id
                          )"
                    ></el-input>
                    <span class="arrow-up"  v-if="scope1.row.up"><img src="/img/arrowup.png" width="20px" height="20px"/>
                      <span>{{scope1.row.up}}%</span>
                    </span>
                    <span class="arrow-down" v-if="scope1.row.down"><img src="/img/arrowdown.png" width="20px" height="20px"/>
                      <span>{{scope1.row.down}}%</span>
                    </span>
                    <!--<div style="width: 35px; text-algin: center">-->
                    <!--<el-link-->
                    <!--v-if="scope1.row.children"-->
                    <!--type="primary"-->
                    <!--@click="-->
                    <!--onRemove(-->
                    <!--scope.row.id,-->
                    <!--scope.row.weeks.find((p) => p.name == 'week7').id,-->
                    <!--scope1.row.id-->
                    <!--)-->
                    <!--"-->
                    <!--&gt;移除</el-link-->
                    <!--&gt;-->
                    <!--</div>-->
                  </div>
                </template>
              </el-table-column>
              <!--<el-table-column label="图片" align="center">-->
              <!--<template slot-scope="scope1">-->
              <!--<div-->
              <!--v-if="-->
              <!--scope1.$index === 0 &&-->
              <!--scope.row.weeks.find((p) => p.name == 'week7')-->
              <!--"-->
              <!--style="width: 100px; height: 100px; margin: 0 auto"-->
              <!--&gt;-->
              <!--<img-->
              <!--v-if="-->
              <!--scope.row.weeks.find((p) => p.name == 'week7').image-->
              <!--"-->
              <!--:src="-->
              <!--scope.row.weeks.find((p) => p.name == 'week7').image-->
              <!--"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--<img-->
              <!--v-if="-->
              <!--!scope.row.weeks.find((p) => p.name == 'week7').image-->
              <!--"-->
              <!--:src="empty_image"-->
              <!--style="width: 100%; height: 100%"-->
              <!--/>-->
              <!--</div>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week7').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table-week end   -->
    <!-- foods choice start-->
    <!--<el-dialog-->
    <!--:title="'选择食谱 / 菜品'"-->
    <!--append-to-body-->
    <!--:visible.sync="dialog_choice.opened"-->
    <!--width="600px"-->
    <!--&gt;-->
    <!--<foods-choice v-if="dialog_choice.opened" @change="onChoiceChange" />-->
    <!--</el-dialog>-->
    <!-- foods choice end -->
  </div>
</template>
<script>
  import foodsChoice from "@/views/foods/components/foodschoice";
  import {calRecipe} from "@/api/system/meals"
  export default {
    name: "foodsWeek",
    components: {
      foodsChoice,
    },
    props: {
      // 表格头部
      headers: [],
      // 表格数据
      smartDatas: [],
      // 5天制 6天制 7天制
      days: {
        type: Number,
        default: 5,
      },
      height: {
        type: Number,
        default: 800,
      },
      crowd:'',
      foodCatalog:'',
      startAge:undefined,
      endAge:undefined,
      peipScore:'',
      dragnode: {},
      nutritionValue:[
      ],
    },
    data() {
      return {
        empty: " ",
        intakeValue:[
          {
            name:"谷类",
            code:"gl"
          },
          {
            name:"薯类",
            code:"sl"
          },
          {
            name:"蔬菜",
            code:"sc"
          },
          {
            name:"水果",
            code:"sg"
          },
          {
            name:"畜禽肉类-蛋类-水产品",
            code:"xql:scp:dl"
          },
          {
            name:"大豆",
            code:"dd"
          },{
            name:"坚果",
            code:"jg"
          },
          ,{
            name:"乳制品",
            code:"rzp"
          },
          ,{
            name:"食用油",
            code:"syy"
          },
          ,{
            name:"盐",
            code:"sy"
          }
        ],
        powerValue:[{name:"脂肪占总能量",code:"103"},{name:"蛋白占总能量",code:"102"},{name:"碳水化合物占总能量",code:"104"}],
        empty_image: "/img/tianjia.png",
        dialog_choice: {
          opened: false, // 是否显示
          data_id: "", // 主数据ID
          week_id: "", // 周几数据ID
          upload_url: "", // 上传地址
        },
        mealTypeData:[
          {
            name:"早餐",
            value:"1"
          },
          {
            name:"早点",
            value:"2"
          },
          {
            name:"午餐",
            value:"3"
          },
          {
            name:"午点",
            value:"4"
          },
          {
            name:"晚餐",
            value:"5"
          },
          {
            name:"晚点",
            value:"6"
          }
        ],
        peippcScore:'0',
      };
    },
    // 计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
    computed: {},
    // 当属性的值发生变化时，就会调用对应属性的方法，方法里面的形参对应的是属性的新值和旧值
    watch: {
      // 'smartDatas':{
      //   handler(data){
      //     data.forEach(item=>{
      //       if(!item.flag){
      //         item.weeks.forEach(_=>{
      //           _.foods.forEach(__=>{
      //             let count=0;
      //             __.children.forEach(___=>{
      //               count+= parseFloat(___.count?___.count:0)
      //             })
      //             this.$set(__,"count",count);
      //           })
      //         })
      //       }
      //     })
      //     this.smartDatas.forEach(item=> {
      //       this.$set(item, "flag", false);
      //     })
      //     this.getFoodScoreSmart();
      //   },
      //   deep:true,
      // }
    },
    // 组件第一次加载
    mounted() {
      this.init();
    },

    methods: {
      //同步修改高度
      resizeExpendHeight() {
        setTimeout(() => {
          //真实高度列表
          var foodTypeList = document.querySelectorAll(".colNoneBorder.is-hidden .foodType");
          for (var i = 0; i < foodTypeList.length; i++) {
            var pnode = foodTypeList[i].parentNode.parentNode.parentNode;
            if(pnode.className.indexOf("is-leaf")<0)
            {
              var nodeSelect='.colNoneBorder [data="'+foodTypeList[i].getAttribute("data")+'"]';
              var shownodelist=document.querySelectorAll(nodeSelect);
              for(var j=0;j<shownodelist.length;j++)
              {
                var tpnode=shownodelist[j].parentNode.parentNode;
                if(tpnode.className.indexOf("is-hidden")<0)
                {
                  tpnode.style.height=pnode.offsetHeight+"px";
                }
              }
            }
          }
        },50);
      },
      oncontextmenuFood(e, data_id, week_id, food_id) {
        if (e.button === 2) {
          //如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
          this.$refs.contextmenuFood.style.top = e.clientY - 140 + "px"; //鼠标点击时给div定位Y轴
          this.$refs.contextmenuFood.style.left = e.clientX + "px"; //鼠标点击时给div定位X轴
          this.$refs.contextmenuFood.style.display = "block"; //显示div盒子
        } else {
          this.$refs.contextmenuFood.style.display = "none"; //否则不显示div盒子
        }
      },
      GetCurentNode(data_id, week_id, food_id) {
        this.smartDatas.forEach((data) => {
          if (data.id === data_id) {
            data.weeks.forEach((week) => {
              if (week.id === week_id) {
                var idx = week.foods.find((p) => p.id === food_id);
                if (idx > -1) {
                  week.foods.splice(idx, 1);

                  return;
                }
              }
            });
          }
        });
      },
      expandchange(a, b) {
        this.resizeExpendHeight();
      },
      // 根据名称获取mealtype
      getmealTypeData(name){
        return  this.mealTypeData.filter(_=>{
          if(_.name==name){
            return _.value
          }
        })[0].value
      },
      // //拖放进入
      // ondragenter(ev) {
      //   ev.preventDefault();
      //   ev.path.forEach((e) => {
      //     var cname = e.className;
      //     if (cname == "drapIn") {
      //       e.classList.add("drapInActive");
      //     }
      //   });
      // },
      // ondragleave(ev) {
      //   ev.preventDefault();
      //   var drapIn = null;
      //
      //   ev.path.forEach((e) => {
      //     var cname = e.className;
      //     if (cname && cname.indexOf("drapIn") >= 0) {
      //       drapIn = e;
      //     }
      //   });
      //
      //   if (drapIn != null) {
      //     if (!drapIn.contains(ev.fromElement)) {
      //       drapIn.classList.remove("drapInActive");
      //     }
      //   }
      // },
      // ondragover(ev) {
      //   ev.preventDefault();
      // },
      //
      // //拖放结束
      // drop(ev, id, week) {
      //   ev.preventDefault();
      //   var node = JSON.parse(JSON.stringify(this.dragnode.node));
      //   this.appendDragFood(node, id, week);
      //
      //   ev.path.forEach((e) => {
      //     var cname = e.className;
      //     if (cname && cname.indexOf("drapIn") >= 0) {
      //       e.classList.remove("drapInActive");
      //     }
      //   });
      //   this.resizeExpendHeight();
      //   // this.getFoodScore();
      // },
      //获取分数
      getFoodScoreSmart(){
        this.dragnode.node={};
        let day=[0,0,0,0,0,0,0]
        let days=0;
        let foods={}
        let mealTypes=[]
        if(this.startAge) {
          foods["startAge"] = this.startAge;
          foods["endAge"] = this.endAge;
          let recipeVals = [];
          var that = this;
          this.smartDatas.forEach(_ => {
            let index = 0
            _.weeks.forEach(__ => {
              __.foods.forEach(___ => {
                if (___.children) {
                  day[index] += 1;
                  mealTypes.push(that.getmealTypeData(_.name));
                  ___.children.forEach(____ => {
                    recipeVals.push({
                      foodId: ____.id,
                      val: ____.count ? ____.count : 0,
                      mealType: that.getmealTypeData(_.name),
                      week: __.name.slice(4)
                    })
                  })
                }
              })
              index++;
            })
          })
          if (mealTypes.length > 0) {
            let obj = Array.from(new Set(mealTypes))
            let resultObj = "";
            for (let i = 0; i < obj.length; i++) {
              resultObj += obj[i] + ","
            }
            foods["mealTypes"] = resultObj.substring(0, resultObj.length - 1)
          }
          for (let i = 0; i < day.length; i++) {
            if (day[i] > 0) {
              days++;
            }
          }
          foods["recipeVals"] = recipeVals
          foods["days"] = days;
          let types='';
          for(let i=0;i<this.foodCatalog.length;i++){
            types+= that.getmealTypeData(this.foodCatalog[i])+","
          }
          foods["types"]=types;
          if (foods.recipeVals.length > 0) {
            calRecipe(foods).then(res => {
              if (res.data.success) {
                let resData = res.data.data;
                let intake = {};
                let data = [];
                intake.mealSelect = "推荐范围(" + resData.recipeCalDTOList.gl.mealSelect + "%)"
                that.intakeValue.forEach(_ => {
                  if(_.code=="sl"||_.code=="jg"){
                    data.push({
                      name: _.name,
                      range: "适量",
                      jl: parseFloat(resData.recipeCalDTOList[_.code].jl).toFixed(2),
                      grade: "OK",
                      point: 0,
                      avg: resData.recipeCalDTOList[_.code].avg
                    })
                  }else {
                    data.push({
                      name: _.name,
                      range: resData.recipeCalDTOList[_.code].rang_min + "-" + resData.recipeCalDTOList[_.code].rang_max + "(" + resData.recipeCalDTOList[_.code].recomRangMin + "-" + resData.recipeCalDTOList[_.code].recomRangMax + ")",
                      jl: resData.recipeCalDTOList[_.code].jl,
                      grade: resData.recipeCalDTOList[_.code].grade,
                      point: resData.recipeCalDTOList[_.code].point
                    })
                  }
                })
                intake.data = data;
                let nutrition = [];

                that.nutritionValue.forEach(_ => {
                  nutrition.push({
                    code: _.code,
                    name: _.name,
                    bz: _.bz,
                    min: _.min,
                    max: _.max,
                    realIntake: resData.nutritionCalDTOList[_.code].realIntake,
                    dris: resData.nutritionCalDTOList[_.code].realPropor,
                    dris2: resData.nutritionCalDTOList[_.code].dris,
                    realPropor: resData.nutritionCalDTOList[_.code].realPropor,
                    reqPropor: resData.nutritionCalDTOList[_.code].min + "-" + resData.nutritionCalDTOList[_.code].max,
                    grade: resData.nutritionCalDTOList[_.code].grade, point: resData.nutritionCalDTOList[_.code].point
                  })
                })
                console.log(nutrition)

                let power = [];
                that.powerValue.forEach(_ => {
                  power.push({
                    name: _.name,
                    req: resData.powerCalDTOList[_.code].min + "-" + resData.powerCalDTOList[_.code].max,
                    real: resData.powerCalDTOList[_.code].real,
                    grade: resData.powerCalDTOList[_.code].grade,
                    point: resData.powerCalDTOList[_.code].point.toFixed(2)
                  })
                })
                let protein = [];
                protein = resData.proteinCalDTOList;
                let sum = 0;
                resData.proteinCalDTOList.forEach(_ => {
                  sum += parseFloat(_.real)
                })
                protein.forEach(_ => {
                  _["realSum"] = parseFloat(sum).toFixed(2)
                  _["req"] = ">=" + _.min
                  _["real"]=_.real.toFixed(2)
                  if(parseFloat( _.min)<=parseFloat(sum)){
                    _["grade"]="ok"
                    _["point"]="0"
                  }else{
                    _["grade"]="不足"
                    _["point"]=(10/_.min*(_.min-sum)).toFixed(2)
                  }
                })
                let meal = [];
                meal = resData.mealTypeCalDTOList
                that.peippcScore = that.peipScore;
                that.$emit('childfn', Math.floor(that.getData(res.data.data) * 100) / 100, "smartDatas", that.peippcScore, intake, nutrition, power, protein, meal,);
              }
            })
          } else {
            that.$emit('childfn', 0, "smartDatas", that.peippcScore, [], [], [], [], []);
          }
        }else{
          this.$message({
            message: "年龄未填写",
            type: "info"
          });
        }
      },

      //处理数据
      getData(data){
        let lastScore=100;
        if(data.mealTypeCalDTOList&&data.mealTypeCalDTOList.length){
          for(let i=0;i<data.mealTypeCalDTOList.length;i++){
            lastScore= parseFloat(lastScore)-parseFloat(data.mealTypeCalDTOList[i].point);
          }
        }
        if(data.nutritionCalDTOList){
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["101"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["102"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["201"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["204"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["301"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["303"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["401"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["405"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["406"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.nutritionCalDTOList["415"].point);
        }
        if(data.powerCalDTOList){
          lastScore= parseFloat(lastScore)-parseFloat(data.powerCalDTOList["102"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.powerCalDTOList["103"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.powerCalDTOList["104"].point);
        }
        if(data.recipeCalDTOList){
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["dd"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["gl"].point);
          // lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["jg"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["rzp"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["sc"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["sg"].point);
          // lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["sl"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["sy"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["syy"].point);
          lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["xql:scp:dl"].point);
        }
        var real=0;
        if(data.proteinCalDTOList&&data.proteinCalDTOList.length){
          for(let i=0;i<data.proteinCalDTOList.length;i++){
            real+=parseFloat(data.proteinCalDTOList[i].real);
          }
          var point =10/parseFloat(data.proteinCalDTOList[0].min)*(parseFloat(data.proteinCalDTOList[0].min)-real>0?parseFloat(data.proteinCalDTOList[0].min-real):parseFloat(real-data.proteinCalDTOList[0].min));
          lastScore=lastScore-(point<10?point:10);
        }
        return lastScore;
      },
      //新增菜谱
      appendDragFood(res, id, wk) {
        if (!res.id) return;
        this.smartDatas.forEach((data) => {
          if (data.id === id) {
            data.weeks.forEach((week) => {
              if (week.name === wk) {
                var food = week.foods.find((p) => p.id == res.id);
                if (food) {
                  return;
                } else {
                  if (!week.foods) {
                    week.foods = [];
                  }
                  week.foods.push(res);
                  return;
                }
              }
            });
          }
        });
      },
      init() {
        this.refreshData();
      },

      // 处理数据
      refreshData() {
        // 计算食物数量 主要用于合并单元格
        this.smartDatas.forEach((item) => {
          item.weeks.forEach((week) => {
            var count = 0;
            week.foods.forEach((food) => {
              count = count + 1;
              if (food.children) {
                count = count + food.children.length;
              }
            });
            if (week.foods != undefined) {
              week.foods.forEach((food) => {
                food.spans = count;
                food.children.forEach((c) => {
                  c.spans = count;
                });
              });
            }
            // console.log(week.foods);
          });
        });
      },

      // 设置假期
      onCheck(week, res) {
        var idx = this.headers.findIndex((p) => p.name === week);
        if (idx > -1) {
          var item = this.headers.find((p) => p.name === week);
          item.is_vacation = res;
          this.$set(this.headers, idx, item);
        }
      },

      // 合并单元格
      onTableSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 2) {
          return [row.spans, 1];
        }
      },

      // 选择菜谱
      onChoice(data_id, week_id) {
        this.dialog_choice.data_id = data_id;
        this.dialog_choice.week_id = week_id;
        this.dialog_choice.opened = true;
        // console.log(this.dialog_choice.data_id);
      },

      // 选择菜谱结果
      onChoiceChange(res) {
        // console.log(res);
        this.smartDatas.forEach((data) => {
          if (data.id === this.dialog_choice.data_id) {
            data.weeks.forEach((week) => {
              if (week.id === this.dialog_choice.week_id) {
                var food = week.foods.find((p) => p.id == res.id);
                if (food) {
                  this.$message({
                    message: "已经存在，请重新选择",
                    type: "error",
                  });
                  return;
                } else {
                  week.foods.push(res);
                  // 关闭对话框
                  this.dialog_choice.opened = false;
                  this.refreshData();
                  return;
                }
              }
            });
          }
        });
      },
//食材数量改变
      foodChange(data_id, week_id){
        this.smartDatas.forEach((data) => {
          if (data.id === data_id) {
            data.weeks.forEach((week) => {
              if (week.id === week_id) {
                week.foods.forEach(food=>{
                  let count = 0;
                  food.children.forEach(___ => {
                    if(isNaN(___.count)){
                      this.$set(___, "count", 0);
                    }
                    count += parseFloat(___.count ? ___.count : 0)
                  })
                  this.$set(food, "count", count);
                })
              }
            });
          }
        });
        this.getFoodScoreSmart();
      },
//菜品数量改变
      dishChange(data_id, week_id){
        this.smartDatas.forEach((data) => {
          if (data.id === data_id) {
            data.weeks.forEach((week) => {
              if (week.id === week_id) {
                week.foods.forEach(food=>{
                  let count = 0;
                  food.children.forEach(___ => {
                    count += parseFloat(___.count ? ___.count : 0)
                  })
                  if(isNaN(food.count)){
                    this.$set(food, "count",0);
                  }
                  if(parseFloat(count)!=parseFloat(food.count)){
                    food.children.forEach(___ => {
                      if(isNaN(food.count)||isNaN(___.count)){
                        this.$set(___, "count",0);
                      }
                      if (food.count == 0&&___.count==0) {
                        this.$set(___, "count", (1 / food.children.length) * food.count).toFixed(2);
                      } else {
                        if(___.count!=0){
                          this.$set(___, "count", ((parseFloat(food.count) / parseFloat(count)) * ___.count).toFixed(2))
                        }
                      }
                    })
                  }

                })
              }
            });
          }
        });
        this.getFoodScoreSmart();
      },

      // // 上传图片
      // onUploadImage(data_id, week_id, res) {
      //   //   console.log(res);
      //   if (res && res.status === "success") {
      //     this.datas.forEach((data) => {
      //       if (data.id === data_id) {
      //         data.weeks.forEach((week) => {
      //           if (week.id === week_id) {
      //             week.image =
      //               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604519021887&di=7dc08416a5f9f6301472e0974e043186&imgtype=0&src=http%3A%2F%2Fcp1.douguo.com%2Fupload%2Fcaiku%2F7%2Ff%2F0%2Fyuan_7fb557435ef7dc525adefe1efaad2070.jpg";
      //           }
      //         });
      //       }
      //     });
      //   }
      // },

      /////////  methods end ///////////
    },
  };
</script>
<style>
  .table-week th {
    background: #f8fbfc !important;
  }
  .table-week td {
    padding: 0 !important;
    vertical-align: top !important;
  }

  .table-week td .cell {
    padding: 0 !important;
  }
  .table-week .col-date3 {
    vertical-align: middle !important;
    background: #f8fbfc !important;
  }

  .table-foods th {
    background: #fff !important;
  }
  .table-foods td {
    padding: 12px 0 !important;
    vertical-align: middle !important;
    background: #fff !important;
  }
  .table-foods td .cell {
    padding: 0 10px !important;
  }
  .drapInActive .el-table th {
    background-color: #dcdfe6 !important;
  }
  .arrow-up ,.arrow-down{
    font-size: 8px;
  }
  .arrow-up img ,.arrow-down img{
    margin-right: -6px;
  }
  .colNoneBorder
  {
    /* border-bottom: 1px solid transparent !important; */
  }
</style>
